<template>
	<div class="gh">
		<c-title :hide="false" text="选择医师"></c-title>

		<div class="jytime">

			<!-- <div class="l">选择	就医时间：</div> -->
			<!-- <van-cell-group inset @click="show = !show">
				<van-field v-model="value" label="就医时间" placeholder="请选择就医时间" />
			</van-cell-group> -->
		</div>
		<div class="content">
			<div class="list" :class="item.cli ==0 ?'dellist':'clicklist'" v-for="(item,index) in list " :key="index"
				@click="selectjs(item)">
				<div class="top">
					<div class="img_left">
						<img :src="item.avator" alt="">
					</div>
					<div class="name_right">
						<div class="name">
							{{item.name}}
						</div>
						<div class="phone">
							{{item.phone}}
						</div>
					</div>
				</div>
				<div class="jj">
					<div class="l">医师简介：</div>
					<div class="r">
						{{item.info}}
					</div>
				</div>
				<!-- <div class="dz">
					<div class="l">医院地址：</div>
					<div class="r">
						{{item.address}}
					</div>
				</div> -->

			</div>
		</div>






<!-- 
		<div class="button" @click="submit">
			预约
		</div> -->


		<van-popup v-model:show="show" position="bottom">

			<van-datetime-picker v-model="currentDate" type="datetime" title="选择就医时间" :min-date="minDate"
				:max-date="maxDate" @cancel='show =false' @confirm='selecttime' />
		</van-popup>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				currentDate: new Date(),
				minDate: new Date(2020, 0, 1),
				maxDate: new Date(2025, 10, 1),
				value: '',
				show: false,
				list: [],
				id: ''
			}
		},
		activated() {
			$http
				.post("plugin.hft-hospital.api.index.doctor_list")
				.then(response => {
					console.log(response)
					if (response.result === 1) {
						this.list = response.data.doctor_list.data
						this.list.forEach(item => {
							this.$set(item, 'cli', 0)
						})
					} else {
						Toast(response.msg);
					}
				})
				.catch(error => {
					console.log(error);
				});
		},
		methods: {
			submit() {},
			selectjs(item) {
				// this.list.forEach(item => {
				// 	this.$set(item, 'cli', 0)
				// })
				// item.cli = 1
				// this.id = item.id
				 this.$router.push(this.fun.getUrl("ysdetail", {}, { ids: item.id  }));
				
			},
			selecttime(e) {
				console.log(this.timestampToTime(e.getTime()))
				this.value = this.timestampToTime(e.getTime())
			},
			//日期转化
			timestampToTime(timestamp) {
				var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				let Y = date.getFullYear() + "-";
				let M =
					(date.getMonth() + 1 < 10 ?
						"0" + (date.getMonth() + 1) :
						date.getMonth() + 1) + "-";
				let D = this.change(date.getDate()) + " ";
				let h = this.change(date.getHours()) + ":";
				let m = this.change(date.getMinutes());
				// let s = this.change(date.getSeconds());
				return Y + M + D + h + m;
			},
			change(t) {
				if (t < 10) {
					return "0" + t;
				} else {
					return t;
				}
			},

		}
	}
</script>

<style scoped lang="scss">
	.gh {
		.button {
			position: fixed;
			bottom: 0;
			width: 100%;
			background-color: #EB5648;
			color: #fff;
			text-align: center;
			line-height: 3rem;
			font-size: 1rem;
		}

		.content {
			padding: 0.5rem;

			.clicklist {
				background-color: #aaa !important;
				// color: #fff;
			}

			.dellist {
				background-color: #fff !important;
			}

			.list {
				padding: 0.5rem;
				background-color: #fff;
				margin-bottom: 0.5rem;
				text-align: left;
				.top{
					display: flex;
					margin-bottom: 0.5rem;
					.img_left{
						margin-right: 1rem;
							img{
								width:4rem;
								height:4rem;
								border-radius: 50%;
							}
					}
					.name_right{
						padding-top: 0.5rem;
						.name{
							font-size: 1rem;font-weight: 600;
						}
					}
				}
				.name {
					margin-bottom: 0.8rem;
					display: flex;
					justify-content: space-between;

					.l {
						font-size: 1rem;
						font-weight: 600;
					}


					.mobile {}
				}

				.jj {
					display: flex;
					justify-content: space-between;
					margin-bottom: 0.5rem;

					.l {
						// width: 6rem;
					}

					.r {
						width: 80%;
					}
				}

				.dz {
					display: flex;
					justify-content: space-between;

					.l {
						// width: 6rem;
					}

					.r {
						width: 70%;
					}
				}
			}
		}
	}
</style>
